<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*CSS代码：*/
        .love {
            display: block;
            width: 100px; height: 100px;
            background: url(web_heart_animation.png) 0 0 no-repeat;
            background-size: 2900%;
            /*原始动画*/
            /*animation: heart-burst steps(28) 0.8s infinite both;*/
            /*animation: heart-burst steps(28) 0.8s 1 normal both;*/
        }
        .stop {
            animation-play-state: paused;
        }
        .animate{
            animation: heart-burst steps(28) 0.8s 1 normal both;
        }
        @keyframes heart-burst {
            0% {
                background-position: 0%;
            }
            100% {
                background-position: 100%;
            }
        }
    </style>
</head>
<body>


<!--HTML代码：-->
<i id="testImg" class="love"></i>
<p><input type="button" id="testBtn" value="暂停"></p>

<script>
    <!--JS代码：-->

    var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
    var flag = 0;

        image.onclick = function () {
            if(flag ==0){
            image.classList.add('animate');
            flag =1;
            console.log(flag)
        }else if (flag ==1){

                image.classList.remove('animate');
                flag =0;
                console.log(flag)
            }
    }



    if (image.classList && image && button) {
    button.onclick = function() {
    if (this.value == '暂停') {
    image.classList.add('stop');
    this.value = '播放';
    } else {
    image.classList.remove('stop');
    this.value = '暂停';
    }
    };
    }
</script>

</body>
</html>